<template>
	<view class="pageBox">
		<view class="new_address">
			<view class="iptBox" @click="onShowTips2">
				<view class="iptL">
					选择地区
				</view>
				<input class="iptR" :disabled="true" type="text" placeholder="请选择所在地区" :value="areaName">
			</view>
			
			<view class="iptBox">
				<view class="iptL">
					详细地址
				</view>
				<input class="iptR" type="text" placeholder="请输入详细地址" v-model="form.address">
			</view>
		</view>

		<view class="new_address">
			<view class="iptBox">
				<view class="iptL">
					收件人
				</view>
				<input class="iptR" type="text" placeholder="请输入收件人真实姓名" v-model="form.name">
			</view>
			
			<view class="iptBox">
				<view class="iptL">
					手机号
				</view>
				<input class="iptR" type="text" placeholder="请输入收件人真实手机号码" v-model="form.mobile">
			</view>
		</view>
		<view class="new_address flex-around">
			<view class="address_tag flex-center" :class="{ 'select_tag' : form.tagId == item.id}" @click="form.tagId = item.id" v-for="(item, index) in tagList" :key="index">
				{{ item.title }}
			</view>
		</view>


		<view class="defaultBox flex-between" @click="form.status = 1 - form.status">
			<view class="defaultL flex-row">
				<image class="choose" src="http://www.bobei.shop/static/login/choosed.png" v-if="form.status == 1"></image>
				<image class="choose" src="http://www.bobei.shop/static/login/choose.png" v-else></image>
				<view class="defaultLText">
					设为默认地址
				</view>

			</view>
			<view class="defaultR">
			 <text class="xing">*</text>	每次购物会默认使用该地址
			</view>
		</view>

		<view class="btnBox flex" v-if="form.id">
			<button class="btn" :plain="true" @click="onDeleteBtn">删除地址</button>
		</view>

		<view class="bomBox flex-center">
			<button class="btn" :plain="true" @click="onSaveBtn">保存</button>
		</view>

		<my-popup-tips :showTips="showTips">
			<view class="tipsBox">
				<view class="tipsTitle flex-center">
					提示
				</view>

				<view class="tipsText flex-center">
					确定要删除该地址吗？
				</view>

				<view class="tipsBtnBox flex-between">
					<button class="tipsCloseBtn" :plain="true" @click="onTipsCloseBtn">取消</button>
					<button class="tipsSureBtn" :plain="true" @click="onTipsSureBtn">确定</button>
				</view>
			</view>
		</my-popup-tips>
		<pick-address ref="pickAdress" @onSelectConfirm="onSelectConfirm"></pick-address>
	</view>
</template>

<script>
	import pickAddress from "../components/john-pickAddress/pickAddress.vue";
	import myPopupTips from "../components/my-popup-tips/my-popup-tips.vue";

	export default {
		components: {
			"pick-address": pickAddress,
			"my-popup-tips": myPopupTips,
		},
		data() {
			return {
				showTips: false,
				form: {
					name: "",
					mobile: "",
					province: "",
					provinceId: "",
					city: "",
					cityId: "",
					area: "",
					countyId: "",
					addresss: "",
					status: 0,
					tagId: 1
				},
				tagList: [
					{
						title: '家',
						id: 1
					},
					{
						title: '公司',
						id: 2
					},
					{
						title: '父母家',
						id: 3
					}
				]
			}
		},

		methods: {
			check() {
				if (!this.form.name) throw "请输入收货人姓名"
				if (!this.form.mobile) throw "请输入手机号码"
				if (!this.form.countyId) throw "请选择所在地区"
				if (!this.form.address) throw "请输入详细地址"
				return "";
			},
			onSaveBtn() {
				// // console.log("保存")
				try {
					this.check()
					this.$post({
						module: "User",
						interface: this.form.id ? "6005" : "6001",
						data: this.form,
					}).then(() => {
						uni.showToast({
							title: "保存成功",
							icon: "none",
							duration: 1500,
						})
						setTimeout(uni.navigateBack, 1000)
					})
				} catch (msg) {
					uni.showToast({
						title: msg,
						icon: "none",
						duration: 1500,
					})
				}
			},
			onDeleteBtn() {
				this.showTips = true;
			},
			onTipsCloseBtn() {
				this.showTips = false;
			},
			onTipsSureBtn() {
				this.showTips = false;
				this.$post({
					module: "User",
					interface: "6002",
					data: {
						id: this.form.id,
					}
				}).then(() => {
					uni.showToast({
						title: "删除成功",
						icon: "none",
						duration: 1500,
					})
					setTimeout(uni.navigateBack, 1000)
				})
			},
			onShowTips2() {
				this.$refs.pickAdress.onOpen();
			},
			onSelectConfirm(province, city, district) {
				// // console.log(province, city, district);
				this.form.province = province.name;
				this.form.provinceId = province.id;
				this.form.city = city.name;
				this.form.cityId = city.id;
				this.form.area = district.name;
				this.form.countyId = district.id;
			},
			getInfo() {
				this.$post({
					module: "Address",
					interface: "2002",
					data: {
						id: this.form.id,
					}
				}).then(res => {
					Object.assign(this.form, res)
					// // console.log("收货地址", res)
				})
			}
		},
		computed: {
			areaName() {
				return this.form.province + this.form.city + this.form.area;
			}
		},
		onLoad(e) {
			if (!e.id) return uni.setNavigationBarTitle({
				title: "添加地址"
			});
			this.form.id = e.id;
			this.getInfo();
		}
	}
</script>

<style scoped lang="scss">
	.pageBox {
		padding: 0 32rpx;
		overflow: hidden;
		.new_address {
			width: 686rpx;
			padding: 30rpx 20rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(212,212,212,0.25);
			margin-bottom: 50rpx;
			.address_tag {
				width: 180rpx;
				height: 56rpx;
				background: #F6F6F8;
				border-radius: 16rpx;
				color: #000000;
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(212,212,212,0.25);
				font-size: 28rpx;
			}
			.select_tag {
				background-color: #FBD0CF;
				color: #F2615F;
			}
		}

		.iptBox {
			.iptL {
				width: 150rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 40rpx;
				margin-top: 16rpx;
			}

			.iptR {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 40rpx;
				height: 56rpx;
				background: #F6F6F8;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: 10rpx 0 10rpx;
				padding: 0 20rpx;
			}
			.iptR_new {
				background-color: transparent;
			}
		}

		.defaultBox {
			margin-top: 64rpx;

			.defaultL {
				.choose {
					width: 30rpx;
					height: 30rpx;
				}

				.defaultLText {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 40rpx;
					margin-left: 10rpx;
				}
			}

			.defaultR {
				.xing {
					color: #F2615F;
				}
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #afa9b0;
				line-height: 40rpx;
			}
		}

		.btnBox {
			justify-content: flex-end;
			margin-top: 20rpx;

			.btn {
				padding: 0;
				margin: 0;
				border: none;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #F2615F;
				line-height: 40rpx;
			}
		}


		.bomBox {
			width: 100%;
			height: 120rpx;
			background-color: #ffffff;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 1;

			.btn {
				padding: 0;
				margin: 0;
				border: none;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				line-height: 40rpx;
				width: 486rpx;
				height: 72rpx;
				background: #F2615F;
				border-radius: 52rpx;
			}
		}

		.tipsBox {
			width: 550rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			padding: 64rpx 48rpx;

			.tipsTitle {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 40rpx;
			}

			.tipsText {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #736464;
				line-height: 40rpx;
				margin-top: 48rpx;
			}

			.tipsBtnBox {
				width: 100%;
				margin-top: 90rpx;

				button {
					padding: 0;
					margin: 0;
					width: 200rpx;
					height: 72rpx;
					border-radius: 52rpx;
					font-size: 28rpx;
				}

				.tipsCloseBtn {
					color: #F2615F;
					border: 2rpx solid #F2615F;
				}

				.tipsSureBtn {
					color: #ffffff;
					border: none;
					background: #F2615F;
				}
			}
		}

		.tipsBox2 {
			width: 100%;
			height: calc(100vh - 100rpx);
		}
	}
</style>
